/**事件冒泡 */
/*
 事件冒泡是指当一个事件发生在DOM元素上时，如果该元素有父元素，
那么这个事件也会传播到父元素上，依次传播至更高层级的祖先元素。
这种传播方式允许在父元素上捕获事件，从而实现事件委托和处理。
在JavaScript中，事件冒泡是DOM事件模型的一部分。当一个事件在DOM元素上触发时，
它会沿着DOM树向上传播，直到达到根节点。这意味着如果你在子元素上触发了一个事件，
它会一直冒泡到父元素，直到根节点。
你可以使用addEventListener方法来在父元素上监听事件，然后通过事件冒泡来捕获子元素上的事件。
这种方式可以减少事件处理程序的数量，提高性能，并且使得动态添加或删除子元素时更加方便
 */

/**事件捕获 */
/* 
事件捕获是指在事件冒泡的过程中，从最内层的元素开始向最外层的元素传递事件的过程。
事件捕获的目的是在事件处理过程中，能够正确地处理事件，并且能够避免事件在元素之间的传递过程中出现意外的情况。
在事件捕获的过程中，事件从最内层的元素开始向最外层的元素传递。
当一个元素上触发一个事件时，该事件会首先在该元素上进行处理。
如果该元素没有处理该事件，那么该事件会向上冒泡到父元素，直到到达文档根节点。
如果在整个事件冒泡过程中，没有任何一个元素能够处理该事件，那么该事件将被传递给文档的根元素，从而触发默认的行为。
事件捕获的优点是可以更加准确地处理事件，并且可以避免事件在元素之间的传递过程中出现意外的情况。
但是，事件捕获也会带来一些问题，例如事件处理的复杂度增加，并且可能会影响事件的响应速度。
 */
/**addEventListener*/
element.addEventListener(type, listener, useCapture);
// 其中，element是要添加事件监听器的元素，type是要监听的事件类型，listener是事件处理函数，useCapture是一个布尔值，表示是否使用事件捕获。
// 例如，以下代码为一个按钮添加了一个点击事件监听器：
const button1 = document.querySelector('button');
button.addEventListener('click', function () {
    console.log('Button clicked!');
});
// 在这个例子中，addEventListener方法用于为按钮添加了一个点击事件监听器。当按钮被点击时，事件处理函数会被调用，并且会在控制台中输出一条消息。
// addEventListener方法还可以用于监听多个事件，例如：
const button = document.querySelector('button');
button.addEventListener('click', function () {
    console.log('Button clicked!');
});
button.addEventListener('mouseover', function () {
    console.log('Mouse over button!');
});
// 如果需要删除一个事件监听器，可以使用removeEventListener方法。

// 一般来说任何在window上发生的事件都可以通过<body>元素上对应的属性赋值来确定
/**load事件 */
<body onload="console.log('5555)"></body>
// 图片上也存在onload事件

/**unload事件 */
// unload事件是JavaScript中的一个事件，当页面或文档被卸载时触发。该事件通常用于清理和释放资源，例如关闭数据库连接、取消定时器、清除事件监听器等等。
// unload事件的触发时机是在页面或文档完全卸载之前。在unload事件处理函数中，可以执行一些清理和释放资源的操作，例如：
window.addEventListener('unload', function () {
    // 关闭数据库连接
    db.close();

    // 取消定时器
    clearInterval(timer);

    // 清除事件监听器
    document.removeEventListener('click', handleClick);
});

/**resize事件 */
//  resize事件在浏览器中表示窗口或框架的大小调整。当浏览器窗口大小发生变化时，会触发resize事件。
window.addEventListener('resize', function (event) {
    console.log('窗口大小发生变化');
});

/**scroll事件 */
//   scroll事件在浏览器中表示用户滚动页面的行为。当用户滚动页面时，会触发scroll事件。
window.addEventListener('scroll', function (event) {
    console.log('用户正在滚动页面');
});

/**焦点事件 */
// 焦点事件是指在HTML文档中，当元素获得或失去焦点时触发的事件。常见的焦点事件包括focus、blur、focusin和focusout。\
// focus和focusin都是焦点事件，但它们之间有一些区别。
// focus事件在元素自身获得焦点时触发，而focusin事件在元素或其子元素获得焦点时都会触发。换句话说，focusin事件具有冒泡行为，而focus事件不会冒泡。

/**鼠标和滚轮事件 */
// 鼠标点击事件（click）：当用户点击鼠标按钮时触发。

element.addEventListener("click", function (event) {
    // 处理点击事件
});
// 鼠标移动事件（mousemove）：当用户移动鼠标时触发。

element.addEventListener("mousemove", function (event) {
    // 处理鼠标移动事件
});
// 鼠标按下事件（mousedown）：当用户按下鼠标按钮时触发。

element.addEventListener("mousedown", function (event) {
    // 处理鼠标按下事件
});
// 鼠标释放事件（mouseup）：当用户释放鼠标按钮时触发。

element.addEventListener("mouseup", function (event) {
    // 处理鼠标释放事件
});
// 滚轮滚动事件（wheel）：当用户使用鼠标滚轮滚动时触发。

element.addEventListener("wheel", function (event) {
    // 处理滚轮滚动事件
});
/**客户端坐标,页面坐标,屏幕坐标 */
// 客户端坐标（Client Coordinates）：客户端坐标是相对于浏览器窗口可视区域左上角的坐标系统。它以窗口可视区域的左上角为原点，水平向右为正方向，垂直向下为正方向。可以使用event.clientX和event.clientY来获取鼠标事件的客户端坐标。
element.addEventListener("click", function (event) {
    var clientX = event.clientX; // 鼠标在窗口可视区域的水平坐标
    var clientY = event.clientY; // 鼠标在窗口可视区域的垂直坐标
});
//在页面没有滚动时,客户端坐标和页面坐标一样
// 页面坐标 （Page Coordinates）：页面坐标是相对于整个网页文档的坐标系统。它以整个网页文档的左上角为原点，水平向右为正方向，垂直向下为正方向。可以使用event.pageX和event.pageY来获取鼠标事件的页面坐标。
element.addEventListener("click", function (event) {
    var pageX = event.pageX; // 鼠标在页面文档的水平坐标
    var pageY = event.pageY; // 鼠标在页面文档的垂直坐标
});
// 屏幕坐标（Screen Coordinates）：屏幕坐标是相对于用户屏幕的坐标系统。它以用户屏幕的左上角为原点，水平向右为正方向，垂直向下为正方向。可以使用window.screenX和window.screenY来获取当前窗口的屏幕坐标。
var screenX = window.screenX; // 窗口在屏幕上的水平坐标
var screenY = window.screenY; // 窗口在屏幕上的垂直坐标

/**键盘与输入事件 */
// 键盘按下事件（keydown）：当用户按下键盘上的任意键时触发。
element.addEventListener("keydown", function (event) {
    // 处理键盘按下事件
});
// 键盘释放事件（keyup）：当用户释放键盘上的任意键时触发。
element.addEventListener("keyup", function (event) {
    // 处理键盘释放事件
});
// 输入事件（input）：当用户在可编辑的输入字段中输入文本时触发。
element.addEventListener("input", function (event) {
    // 处理输入事件
});
// 文本改变事件（change）：当用户修改输入字段的内容并且失去焦点时触发。
element.addEventListener("change", function (event) {
    // 处理文本改变事件
});

/**键码 */
/* 字母键：A-Z（键码：65-90）
数字键：0-9（键码：48-57）
功能键：F1-F12（键码：112-123）
空格键：（键码：32）
Enter键：（键码：13）
Tab键：（键码：9）
删除键：（键码：8）
方向键：上（键码：38）、下（键码：40）、左（键码：37）、右（键码：39）
使用keyCode属性获取键码的示例代码如下：
 */
element.addEventListener("keydown", function (event) {
    var keyCode = event.keyCode; // 获取按下的键的键码
    console.log(keyCode);
});
// 使用key属性获取键名的示例代码如下：
element.addEventListener("keydown", function (event) {
    var key = event.key; // 获取按下的键的键名
    console.log(key);
});

/**deviceorientation事件 */
/* 
deviceorientation事件是JavaScript中的一个事件，用于在设备orientation发生变化时触发。
该事件通常用于开发移动应用程序，例如在手机或平板电脑上使用陀螺仪来控制用户界面。
deviceorientation事件的触发时机是设备orientation发生变化时。
当设备orientation发生变化时，该事件会被触发，并且会传递一个包含设备orientation的事件对象。事件对象包含以下属性：

alpha：设备绕x轴的角度，范围为-180到180。
beta：设备绕y轴的角度，范围为-90到90。
gamma：设备绕z轴的角度，范围为-180到180。
例如，以下代码为一个页面添加了一个deviceorientation事件监听器：
 */
window.addEventListener('deviceorientation', function(event) {
  console.log('Alpha: ' event.alpha);
  console.log('Beta: ' event.beta);
  console.log('Gamma: ' event.gamma);
});

/**devicemotion事件 */
/* 
devicemotion事件是JavaScript中的一个事件，用于在设备运动传感器检测到重力、加速度、陀螺仪数据时触发。
该事件通常用于开发移动应用程序，例如在智能手环或智能手表上使用运动传感器来监测用户的运动。
devicemotion事件的触发时机是设备运动传感器检测到重力、加速度、陀螺仪数据时。
当设备运动传感器检测到重力、加速度、陀螺仪数据时，该事件会被触发，并且会传递一个包含设备运动数据的事件对象。事件对象包含以下属性：

acceleration：一个包含x、y、z三个方向的重力加速度数据的对象。
accelerationIncludingGravity：一个包含x、y、z三个方向的重力加速度数据的对象，包括重力。
rotationRate：一个包含x、y、z三个方向的陀螺仪数据对象的对象。
interval：一个表示事件触发间隔的时间戳。

例如，以下代码为一个页面添加了一个devicemotion事件监听器：
 */
window.addEventListener('devicemotion', function(event) {
  console.log('Acceleration: 'vent.acceleration.x, event.acceleration.y, event.acceleration.z);
  console.log('Acceleration including gravity: 'vent.accelerationIncludingGravity.x, event.accelerationIncludingGravity.y, event.accelerationIncludingGravity.z);
  console.log('Rotation rate: 'vent.rotationRate.alpha, event.rotationRate.beta, event.rotationRate.gamma);
});

/**触摸事件 */
// 触摸事件是指在触摸屏设备上进行的交互事件，例如触摸开始、触摸移动、触摸结束等等。在Web开发中，触摸事件通常用于开发响应式的触摸屏应用程序，例如在移动设备上使用触摸屏来控制页面的滚动、缩放、旋转等操作。
// 以下是一些常见的触摸事件：
// touchstart：触摸开始事件。
// touchmove：触摸移动事件。
// touchend：触摸结束事件。
// touchcancel：触摸取消事件。
// 以下是一个简单的例子，用于监听触摸事件：
document.addEventListener('touchstart', function(event) {
  console.log('Touch started at: ' event.touches[0].pageX + ',' + event.touches[0].pageY);
});
document.addEventListener('touchmove', function(event) {
  console.log('Touch moved at: ' event.touches[0].pageX + ',' + event.touches[0].pageY);
});
document.addEventListener('touchend', function(event) {
  console.log('Touch ended at: ' event.changedTouches[0].pageX + ',' + event.changedTouches[0].pageY);
});
document.addEventListener('touchcancel', function(event) {
  console.log('Touch cancelled');
});

/**手势事件 */
// 手势开始事件 （gesturestart）：当用户进行手势操作时触发，例如双指缩放或旋转。
element.addEventListener("gesturestart", function(event) {
  // 处理手势开始事件
});
// 手势移动事件（gesturechange）：当用户进行手势操作并且手势状态发生变化时触发。
element.addEventListener("gesturechange", function(event) {
  // 处理手势移动事件
});
// 手势结束事件（gestureend）：当用户结束手势操作时触发。
element.addEventListener("gestureend", function(event) {
  // 处理手势结束事件
});